<template>
  <el-dialog
    v-bind="$attrs"
    class="base-dialog"
    :title="title"
    :before-close="handleClose"
    :show-close="showClose"
    :visible.sync="dialogVisible"
    :width="width"
    :close-on-click-modal="false"
    :modal-append-to-body="modalAppendToBody"
    :top="top"
    v-on="$listeners"
  >
    <div slot="title" class="dialog-title">
      <span>{{ title }}</span>
      <span class="dialog-title-tip">{{ subtitle }}</span>
    </div>
    <slot />
    <div v-if="footer" slot="footer" class="dialog-footer">
      <el-button v-if="needRejectBtn" @click="handleReject">{{ rejectText }}</el-button>
      <el-button v-if="otherBtn" type="primary" @click="handleOtherBtn">{{ otherBtn }}</el-button>
      <el-button v-if="!hideEsc" class="dialog_cancel" @click="handleDialogCancle">{{ escText }}</el-button>
      <el-tooltip v-if="successTitle" effect="dark" :content="successTitle" placement="top">
        <div style="display: inline-block">
          <el-button
            type="primary"
            :disabled="successDisabled"
            style="margin-left: 0.25rem"
            @click="handleDialogSubmit"
            >{{ successText }}</el-button
          >
        </div>
      </el-tooltip>
      <el-button
        v-else
        type="primary"
        :disabled="successDisabled"
        style="margin-left: 0.25rem"
        @click="handleDialogSubmit"
        >{{ successText }}</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'BaseDialog',
  components: {},
  props: {
    otherBtn: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '70%'
    },
    top: {
      type: String,
      default: '15vh'
    },
    baseData: {
      type: Object,
      default: () => ({
        label: '',
        prop: '',
        placeholder: ''
      })
    },
    visible: {
      type: Boolean,
      default: false
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    hideEsc: {
      type: Boolean,
      default: false
    },
    escText: {
      type: String,
      default: '取消'
    },
    successDisabled: {
      type: Boolean,
      default: false
    },
    successText: {
      type: String,
      default: '确定'
    },
    footer: {
      type: Boolean,
      default: true
    },
    needRejectBtn: {
      type: Boolean,
      default: false
    },
    rejectText: {
      type: String,
      default: '拒绝'
    },
    successTitle: {
      type: String,
      default: ''
    },
    modalAppendToBody: {
      type: Boolean,
      default: false
    },
    subtitle: {
      type: String,
      default: ''
    },
    showClose: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      dialogVisible: false
      // handleDialogSubmit: this.$debounce(this._handleDialogSubmit, 300)
    }
  },
  watch: {
    visible(_new, _old) {
      this.dialogVisible = _new
      // console.log("watch")
    }
  },
  created() {},
  mounted() {
    this.dialogVisible = this.visible
  },
  destroyed() {},
  methods: {
    handleDialogSubmit() {
      this.$emit('handleDialogSubmit')
    },
    // _handleDialogSubmit() {
    //   this.$emit("handleDialogSubmit")
    // },
    handleDialogCancle() {
      this.$emit('handleDialogCancle')
    },
    handleClose() {
      this.$emit('handleDialogCancle')
    },
    handleReject() {
      this.$emit('handleReject')
    },
    handleOtherBtn() {
      this.$emit('handleOtherBtn')
    }
  }
}
</script>

<style lang="scss">
.base-dialog {
  .el-dialog {
    padding: 0;
  }

  // .el-dialog__header {
  // 	height: 40px;
  // 	background:$dialog_header_background;
  // 	color: $text_deep;
  // 	line-height: 40px;
  // 	padding: 0 15px;
  // 	position: relative;
  // 	border-top-left-radius: 5px;
  // 	border-top-right-radius: 5px;
  // }
  // .el-dialog__title {
  //   color: $text_deep;
  // 	font-size: 20px;
  // }
  .el-dialog__header {
    padding: 0 15px;
    height: 67px;
    border-bottom: rgba($color: #939393, $alpha: 0.3) 1px solid;
    line-height: 67px;
    position: relative;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }

  .el-dialog__title {
    font-size: 20px;
    color: #252b34;
    padding-left: 10px;
    font-weight: bold;
  }

  .el-dialog__headerbtn {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    // color: #000;

    i {
      color: #000;
    }
  }

  .el-dialog__footer {
    text-align: right;
    // border: 1px solid $border_color;
    padding: 30px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }

  .dialog_cancel {
    // background: $dialog_cancal_button_bg;
    // padding: .2rem .7rem;
    font-size: 14px;
    // color: $light_red;
    // border: 1px solid $light_red;
  }

  .dialog-footer {
    .el-button--primary {
      //  padding: .2rem .7rem ;
      font-size: 14px;
    }
  }

  .el-dialog {
    border-radius: 12px;
  }

  .el-dialog__close.el-icon {
    // color: $text_deep !important;
    font-size: 19px;
  }

  .dialog-title {
    font-size: 20px;
    color: #252b34;
    padding-left: 10px;
    font-weight: bold;
    .dialog-title-tip {
      font-size: 14px;
      font-weight: normal;
      color: #909499;
      margin-left: 15px;
    }
  }
}
.base-dialog {
  .el-dialog {
    padding: 0;
  }
  // .el-dialog__header {
  // 	height: 40px;
  // 	background:$dialog_header_background;
  // 	color: $text_deep;
  // 	line-height: 40px;
  // 	padding: 0 15px;
  // 	position: relative;
  // 	border-top-left-radius: 5px;
  // 	border-top-right-radius: 5px;
  // }
  // .el-dialog__title {
  //   color: $text_deep;
  // 	font-size: 20px;
  // }
  .el-dialog__header {
    padding: 0 20px;
    height: 62px;
    border-bottom: rgba($color: #d8d8d8, $alpha: 0.67) 1px solid;
    // line-height: 46px;
    position: relative;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;

    // background-color: #f5f6fa;
  }
  .el-dialog__title {
    font-family: MicrosoftYaHei;
    font-size: 18px;
    color: #000;
    padding-left: 5px;
    line-height: 62px;
  }
  .el-dialog__headerbtn {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #ffffff;
    i {
      color: #ffffff;
    }
  }
  .el-dialog__body {
    padding: 20px 34px;
  }
  .el-dialog__footer {
    text-align: right;
    border: 1px solid $border_color;
    padding: 14px 34px 15px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  .dialog_cancel {
    background: $dialog_cancal_button_bg;
    // padding: .2rem .7rem;
    font-size: 14px;
    color: $light_blue;
    border: 1px solid $light_blue;
  }
  .dialog-footer {
    .el-button--primary {
      //  padding: .2rem .7rem ;
      font-size: 14px;
    }
  }
  .el-dialog {
    border-radius: 5px;
  }
  .el-dialog__close.el-icon {
    color: $text_deep !important;
    font-size: 19px;
  }
  .el-form-item {
    margin-bottom: 10px;
  }
}
</style>
